<template>
    <div class="content-container">
        <el-row class="header-filter four-border-blueBg">
            <el-col :span="16">
                <el-select v-model="listParams.type" class="item" :placeholder="g_t('supplier.category')" clearable>
                    <el-option v-for="item in g_options.costItemTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
                <TextInput v-model="listParams.name" class="item" clearable
                    :placeholder="g_t('supplier.supplierName')" />
                <DateTimeLimit v-model="listParams.startTime" time-point-type="start"
                    :time-boundary="listParams.endTime" :label="g_t('supplier.startTime')"
                    style="margin-right: 10px;min-width: 190px; max-width: 190px;" />
                <DateTimeLimit v-model="listParams.endTime" time-point-type="end" :time-boundary="listParams.startTime"
                    :label="g_t('supplier.endTime')" style="margin-right: 10px;min-width: 190px; max-width: 190px;" />
                <el-button type=" primary" @click="handleQuery">{{
                    $t('public.search')
                    }}</el-button>
                <el-button plain @click="handleReset">{{
                    $t('public.reset')
                    }}</el-button>
            </el-col>
            <el-col :span="8" style="text-align: right;">
                <el-button type="primary" @click="handleCreate">{{ g_t('supplier.enter') }}</el-button>
            </el-col>
        </el-row>
        <div class="base-table-container">
            <BaseTable ref="refContentTable" v-loading="loading" :data="tableData" row-key="id" style="width: 100%">
                <TableColumn prop="status" :label="g_t('supplier.status')" :column-width="columnWidthObj.status">
                    <template #default="{ row }">
                        <span v-if="row.status === 1">{{ g_t('supplier.normal') }}</span>
                        <span v-else-if="row.status === 2">{{ g_t('supplier.locked') }}</span>
                        <span v-else>--</span>
                    </template>
                </TableColumn>
                <TableColumn prop="code" :label="g_t('supplier.code')" :column-width="columnWidthObj.code" />
                <TableColumn prop="name" :label="g_t('supplier.supplierName')" :column-width="columnWidthObj.name" />
                <TableColumn prop="type" :label="g_t('supplier.category')" :column-width="columnWidthObj.type">
                    <template #default="{ row }">
                        <span>{{ g_options.costItemTypeOptions.find(item => item.value == row.type)?.label || '--'
                            }}</span>
                    </template>
                </TableColumn>
                <TableColumn prop="costNum" :label="g_t('supplier.costNum')" :column-width="columnWidthObj.costNum" />
                <TableColumn prop="province" :label="g_t('supplier.province')" :column-width="columnWidthObj.province">
                </TableColumn>
                <TableColumn prop="city" :label="g_t('supplier.city')" :column-width="columnWidthObj.city">
                </TableColumn>
                <TableColumn prop="auditStatus" :label="g_t('supplier.auditStatus')"
                    :column-width="columnWidthObj.auditStatus">
                    <template #default="{ row }">
                        <span v-if="row.auditStatus === 1">{{ g_t('supplier.pendingReview') }}</span>
                        <span v-else-if="row.auditStatus === 2">{{ g_t('supplier.reviewed') }}</span>
                        <span v-else-if="row.auditStatus === 3">{{ g_t('supplier.rejected') }}</span>
                        <span v-else>--</span>
                    </template>
                </TableColumn>
                <TableColumn prop="leader" :label="g_t('supplier.leader')" :column-width="columnWidthObj.leader" />
                <TableColumn prop="mobile" :label="g_t('supplier.mobile')" :column-width="columnWidthObj.mobile" />
                <TableColumn prop="createName" :label="g_t('supplier.createName')"
                    :column-width="columnWidthObj.createName" />
                <TableColumn prop="createTime" :label="g_t('supplier.createTime')"
                    :column-width="columnWidthObj.createTime">
                    <template #default="{ row }">
                        <span>{{
                            row.createTime
                            ? g_dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                            : '--'
                            }}</span>
                    </template>
                </TableColumn>
                <TableColumn prop="remark" :label="g_t('supplier.remark')" :column-width="columnWidthObj.remark" />
                <TableColumn prop="action" fixed="right" :label="$t('public.action')" max-width="220"
                    :column-width="columnWidthObj.action">
                    <template #default="{ row }">
                        <el-button text @click="handleDetail(row)">
                            {{ $t('public.detail') }}
                        </el-button>
                        <el-button text @click="handleEdit(row)">
                            {{ $t('public.edit') }}
                        </el-button>
                        <el-button text @click="handleDelete(row)">
                            {{ $t('public.delete') }}
                        </el-button>
                    </template>
                </TableColumn>
            </BaseTable>
            <BasePagination v-model:page-size="listParams.pageSize" v-model:current-page="listParams.pageNum"
                :total="total" @change="getTableList()" />
        </div>
        <!-- 新建 -->
        <AddOrEditDialog v-if="addOrEditVisible" :row="rowData" v-model="addOrEditVisible" :type="addOrEditType"
            @update="handleQuery" />
        <!-- 详情 -->
        <DetailDialog v-if="detailVisible" :row="rowData" v-model="detailVisible" />
    </div>
</template>

<script setup>
import AddOrEditDialog from './component/AddOrEditDialog.vue'
import DetailDialog from './component/DetailDialog.vue'

const listParams = ref({
    "pageNum": 1,
    "pageSize": 10,
    "name": "",//供应商名称
    "type": "",//类别
    "startTime": "",  //录入开始时间
    "endTime": ""//录入结束时间
})

const rowData = ref({})
const addOrEditType = ref('add')
const addOrEditVisible = ref(false)
const detailVisible = ref(false)

const total = ref(0)
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})

onMounted(() => {
    getTableList()
})

const getTableList = () => {
    loading.value = true
    tableData.value = []
    g_api.travelAgency
        .apiSupplierList(listParams.value)
        .then(({ code, data }) => {
            if (code === '200' && data) {
                tableData.value = data.items || []
                total.value = data.total || 0
                useTableColumnWidth({
                    refTable: refContentTable.value
                }).getTableColumnWidth(data => {
                    columnWidthObj.value = data
                })
            }
        })
        .finally(() => {
            loading.value = false
        })
}

const handleQuery = () => {
    getTableList()
}

const handleReset = () => {
    Object.assign(listParams.value, {
        "pageNum": 1,
        "pageSize": 10,
        "name": "",//供应商名称
        "type": "",//类别
        "startTime": "",  //录入开始时间
        "endTime": ""//录入结束时间
    })
    handleQuery()
}

const handleCreate = () => {
    addOrEditVisible.value = true
    addOrEditType.value = 'add'
}

const handleDetail = row => {
    detailVisible.value = true
    // 创建一个新对象，避免直接引用原始数据
    rowData.value = { ...row }
}

const handleEdit = row => {
    addOrEditVisible.value = true
    addOrEditType.value = 'edit'
    // 创建一个新对象，避免直接引用原始数据
    rowData.value = {
        ...row,
        type: String(row.type)
    }
}


const handleDelete = row => {
    g_utils
        .deleteConfirm()
        .then(() => {
            loading.value = true
            g_api.travelAgency
                .apiSupplierDelete({
                    supplierTypeId: row.supplierTypeId,
                    id: row.id
                })
                .then(res => {
                    if (res.code === '200') {
                        ElMessage.success('删除成功')
                        handleQuery()
                    }
                })
                .finally(() => {
                    loading.value = false
                })
        })
        .catch(() => { })
}
</script>

<style lang="scss" scoped></style>